<template>
  <div id="reg-form">
    <el-form
      ref="passForm"
      :model="formCreate"
    >
      <el-form-item
        :rules="[...getRules('Input', '账号'),{ validator: validatePass, trigger: 'blur' }]"
        prop="account"
      >
        <el-input
          v-model="formCreate.account"
          clearable
          placeholder="请输入账号"
          type="text"
        >
          <img
            slot="prefix"
            src="@/assets/login/account.png"
          />
        </el-input>
      </el-form-item>
      <el-form-item
        :rules="getRules('phone', '手机号')"
        prop="phone"
      >
        <el-input
          v-model="formCreate.phone"
          class="login-input-phone"
          clearable
          placeholder="请输入手机号"
          type="text"
        >
          <div slot="prefix">
            <img
              height="20"
              src="@/assets/login/tel.png"
              style="float: left"
              width="20"
            />
            <span style="color:#202020;padding-left: 10px;line-height: 40px;display: inline-block;float: left">+86(中国)</span>
          </div>
        </el-input>
      </el-form-item>
      <el-form-item
        :rules="getRules('number', '验证码')"
        prop="code"
      >
        <el-input
          v-model="formCreate.code"
          class="login-input-code"
          clearable
          placeholder="请输入验证码"
          type="text"
        >
          <div slot="prefix">
            <img
              height="20"
              src="@/assets/login/security.png"
              style="float: left"
              width="20"
            />
          </div>
        </el-input>
        <el-button
          :disabled="codeNum === 0 ? false : true"
          :loading=" codeNum === 0 ? loading : false"
          :type="codeNum === 0 ? 'primary' : 'info'"
          class="login-button-code"
          @click="handleGetCode(formCreate.phone)"
        >
          {{ codeNum !== 0 ? "重新获取(" + codeNum + "s)" : "获取验证码" }}
        </el-button>
      </el-form-item>
      <el-form-item
        :rules="[...getRules('Input', '密码'),{ validator: validatePass, trigger: 'blur' }]"
        prop="password"
      >
        <el-input
          v-model="formCreate.password"
          :class="passStyle ? 'pass-input' : 'pass-input-false'"
          :type="passwordType ? 'password' : 'text'"
          clearable
          placeholder="密码（6-20位大小写字母和数字组成"
          @blur="passStyle = false"
          @focus="passStyle = true"
        >
          <img
            slot="prefix"
            src="@/assets/login/lock.png"
          />
          <div
            v-show="formCreate.password"
            slot="suffix"
            class="login-suffix"
            @click="handleShowPassword(1)"
          >
            <img
              v-if="passwordType"
              alt=""
              height="20"
              src="@/assets/login/hide.png"
              style="margin-top:10px;margin-left: 5px"
              width="20"
            >
            <img
              v-else
              alt=""
              height="20"
              src="@/assets/login/show.png"
              style="margin-top:10px;margin-left: 5px"
              width="20"
            >
          </div>
        </el-input>
      </el-form-item>
      <el-form-item
        :rules="[...getRules('Input', '确认密码'),{ validator: validatePass2, trigger: 'blur' }]"
        prop="confirmPassword"
      >
        <el-input
          v-model="formCreate.confirmPassword"
          :type="passwordTypeTwo ? 'password' : 'text'"
          clearable
          placeholder="请输入密码"
          :class="passStyle ? 'pass-input' : 'pass-input-false'"
          @blur="passStyle = false"
          @focus="passStyle = true"
        >
          <img
            slot="prefix"
            src="@/assets/login/lock.png"
          />
          <div
            v-show="formCreate.confirmPassword"
            slot="suffix"
            class="login-suffix"
            @click="handleShowPassword(2)"
          >
            <img
              v-if="passwordType"
              alt=""
              height="20"
              src="@/assets/login/hide.png"
              style="margin-top:10px;margin-left: 5px"
              width="20"
            >
            <img
              v-else
              alt=""
              height="20"
              src="@/assets/login/show.png"
              style="margin-top:10px;margin-left: 5px"
              width="20"
            >
          </div>
        </el-input>
      </el-form-item>
      <el-button
        :loading="loading"
        style="width:100%;height:40px;"
        type="primary"
        @click="handleSubmit()"
      >去登录
      </el-button>
    </el-form>
  </div>
</template>

<script>
import { forgot, getCode } from "@/api/login";
import getRules from "@/validUtils";

export default {
  name: "register",
  data() {
    const validatePass = (rule, value, callback) => {
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
      const re = new RegExp(reg);
      if (re.test(value)) {
        callback();
      } else {
        callback(new Error("6-20位大小写字母和数字的组合"));
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (this.formCreate.password == value) {
        callback();
      } else {
        callback(new Error("两次密码不一致"));
      }
    };
    return {
      getRules: getRules,
      validatePass: validatePass,
      validatePass2: validatePass2,
      loading: false,
      passwordType: true,
      passwordTypeTwo: true,
      passStyle: false,
      formCreate: {
        account: "",
        password: "",
        confirmPassword: "",
        invitationCode: "",
        phone: "",
        code: "",
      },
      codeNum: 0,
    };
  },
  methods: {
    init() {
      this.formCreate = {
        account: "",
        password: "",
        confirmPassword: "",
        invitationCode: "",
        phone: "",
        code: "",
      };
      this.$refs["passForm"].resetFields();
    },
    handleSubmit() {
      this.$refs["passForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          forgot(this.formCreate)
            .then((res) => {
              this.$message({
                message: "密码重置成功",
                type: "success",
              });
              this.loading = false;
              this.$emit("on-login", this.formCreate, true);
            })
            .catch((res) => {
              this.loading = false;
            });
        }
      });
    },
    // 查看密码
    handleShowPassword(val) {
      if (val === 1) {
        this.passwordType = !this.passwordType;
      } else {
        this.passwordTypeTwo = !this.passwordTypeTwo;
      }
    },
    // 获取验证码
    handleGetCode(phone) {
      this.$refs["passForm"].validateField("phone", (valid) => {
        if (!valid) {
          getCode(phone).then((res) => {
            this.codeNum = 60;
            let time;
            time = setInterval(() => {
              if (this.codeNum) {
                this.codeNum = --this.codeNum;
              } else {
                clearInterval(time);
              }
            }, 1000);
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
#reg-form {
  /deep/ .el-input--medium .el-input__inner {
    height: 40px;
    line-height: 40px;
  }

  /deep/ .el-input-group__append,
  /deep/ .el-input-group__prepend {
    background: #fff;
  }

  /deep/ .el-input-group__prepend {
    border: 0;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    border-right: 0;
    padding: 0 15px;
  }

  /deep/ .el-input__inner {
    padding-left: 45px;
  }

  /deep/ .el-input__prefix {
    left: 15px;

    img {
      padding-top: 10px;
    }
  }

  .login-input-phone {
    /deep/ .el-input__inner {
      padding-left: 130px !important;
    }
  }

  .login-suffix {
    display: inline-block;
    float: right;
    max-height: 5px;
  }

  .login-input-code {
    width: 200px;
    float: left;
  }

  .login-button-code {
    float: right;
  }
  .pass-input {
    /deep/ .el-input__inner {
      padding-right: 60px;
    }
  }

  .pass-input-false:hover {
    /deep/ .el-input__inner {
      padding-right: 60px;
    }
  }
}
</style>
